<template>
  <div class="analysis_container">
    <div ref="analysis_echarts" class="analysis_echarts"> </div>
  </div>
</template>

<script setup lang="ts" name="analysisEcharts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
const analysis_echarts = ref(null)
const init_Ehcarts = () => {
  const analysisEcharts = echarts.init(analysis_echarts.value)
  console.log(analysisEcharts, 'analysisEcharts');

  const option = {
    backgroundColor: '#fff',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'line', // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      left: '20px',
      right: '20px',
      bottom: '60px',
      top: '16%',
      containLabel: true,
    },
    legend: {
      left: 'center',
      top: '5%',
      textStyle: {
        color: '#000',
      },
      itemWidth: 15,
      itemHeight: 10,
      itemGap: 25,
    },
    dataZoom: [
      {
        show: true,
        height: 18,
        xAxisIndex: [0],
        bottom: 20,
        start: 0,
        end: 100,
        handleIcon:
          'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
        handleSize: '100%',
        handleStyle: {
          color: 'rgba(255, 255, 255,1',
        },
        textStyle: {
          color: '#909399',
          fontSize: 12,
        },
        fillerColor: '#CBCED4',
        borderColor: 'rgba(255, 255, 255,1)',
        backgroundColor: '#F0F2F5',
        showDataShadow: true,
        brushSelect: false,
      },
      {
        type: 'inside',
        disabled: false,
      },
    ],
    xAxis: {
      show: true,
      type: 'category',
      name: '',
      nameLocation: 'end',
      nameTextStyle: {
        fontSize: 14,
      },
      inverse: false,
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
          color: '#000',
          width: 1,
        },
      },
      axisTick: {
        show: true,
        alignWithLabel: true,
        interval: 'auto',
        inside: false,
        length: 5,
        lineStyle: {
          type: 'solid',
          width: 1,
          color: '#909399',
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          width: 1,
          color: '#909399',
        },
      },
      axisLabel: {
        margin: 8,
        interval: 'auto',
        rotate: 0,
        fontSize: 14,
        color: '#909399',
      },
      data: ['2021/09/01', '2021/09/02', '2021/09/03', '2021/09/04', '2021/09/05', '2021/09/06', '2021/09/07', '2021/09/08'],
    },
    yAxis: [
      {
        show: true,
        type: 'value',
        name: '',
        min: 0,
        nameTextStyle: {
          color: '#909399',
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#909399',
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          formatter: '{value} %',
          rotate: 0,
          textStyle: {
            color: '#909399',
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'solid',
            color: '#e4e7ed',
          },
        },
      },
    ],
    series: [
      {
        name: '华为',
        type: 'line',
        lineStyle: {
          type: 'solid',
          color: '#419fff'
        },
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          normal: {
            color: '#FFFFFF',
            borderColor: '#419fff',
            borderWidth: 2,
          },
        },
        data: [67, 97, 80, 76, 52, 63, 24, 13],
      },

      {
        name: '小米',
        type: 'line',
        lineStyle: {
          type: 'solid',
          color: '#5C41FF'
        },
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          normal: {
            color: '#FFFFFF',
            borderColor: '#5C41FF',
            borderWidth: 2,
          },
        },
        data: [63, 86, 63, 62, 36, 51, 56, 22],
      },
      {
        name: 'OPPO',
        type: 'line',
        lineStyle: {
          type: 'solid',
          color: 'red'
        },
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          normal: {
            color: '#FFFFFF',
            borderColor: 'red',
            borderWidth: 2,
          },
        },
        data: [86, 86, 2, 62, 36, 51, 90, 22],
      },
      {
        name: '苹果',
        type: 'line',
        lineStyle: {
          type: 'solid',
          color: 'green'
        },
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          normal: {
            color: '#FFFFFF',
            borderColor: 'green',
            borderWidth: 2,
          },
        },
        data: [2, 86, 63, 62, 8, 51, 5, 22],
      },
    ],
  };

  option && analysisEcharts.setOption(option)
}

onMounted(() => {
  init_Ehcarts()
})
</script>

<style scoped lang="less">
.analysis_container {
  .analysis_echarts {
    width: 100%;
    height: 330px;
  }
}
</style>  